<template>
  <view>
    <!-- 头部及背景色 -->
    <backdrop />
    <navigation
      back
      backColor
      titleClick
      iconName="map"
      :title="title"
      :clickFunc="clickFunc"
      :isBack="false"
    />

    <view class="container">
      <!-- 头部筛选 -->
      <u-sticky zIndex="10071">
        <view class="sticky">
          <backdrop
            :style="'margin-top:' + -(system.statusBarHeight + 44) + 'px'"
          />
          <view class="container">
            <sift
              :changeShowSift="changeShowSift"
              :showSift="showSift"
              :showSort="showSort"
              :changeShowSort="changeShowSort"
              :columns="columns"
              :sortIndex="sortIndex"
            />
          </view>
        </view>
      </u-sticky>

      <!-- 左侧列表 -->
      <menu-list
        :listLoad="listLoad"
        :list="classifyList"
        :classifyLoading="classifyLoading"
        :menuIndex="menuIndex"
        :changeMenuIndex="changeMenuIndex"
      />

      <!-- 服务列表 -->
      <list
        :status="listLoadStatus"
        :listLoad="listLoad"
        :serviceList="serviceList"
      />

      <!-- 筛选弹出层 -->
      <u-popup
        closeOnClickOverlay
        round="20"
        :show="showSift"
        @touchmove.native.stop.prevent=""
        @close="changeShowSift(false)"
      >
        <view class="page-container">
          <view class="sift-popup">
            <view class="popup-title text-center">
              筛选
              <view class="line"></view>
              <u-icon
                class="close"
                name="close"
                color="#232323"
                size="20"
                @click="changeShowSift(false)"
              />
            </view>
            <view class="sift-popup-item">
              <view class="sift-popup-item-title"> 价格区间 </view>

              <slider-range
                decorationVisible
                v-if="showSift"
                :value="[siftForm.min, siftForm.max]"
                :min="0"
                :max="1000"
                :step="50"
                @change="handleRangeChange"
              />
            </view>
            <view
              class="submit-btn flex flex-middle flex-center"
              @click="submitSift"
            >
              确定
            </view>
          </view>
        </view>
      </u-popup>

      <!-- 排序弹出层 -->
      <u-picker
        closeOnClickOverlay
        confirmColor="#37756D"
        :show="showSort"
        :columns="columns"
        :defaultIndex="[[sortIndex]]"
        @confirm="confirmSort"
        @close="changeShowSort(false)"
        @cancel="changeShowSort(false)"
        @touchmove.native.stop.prevent=""
      />
    </view>
  </view>
</template>

<script>
import sift from "./components/sift";
import menuList from "./components/menuList";
import list from "./components/list";
import { mapGetters } from "vuex";
import { getClassifyList, getServiceList } from "@/api/service";

export default {
  components: {
    sift,
    menuList,
    list,
  },
  data() {
    return {
      classifyList: [],
      serviceList: [],
      page: 1,
      totalPage: 0,
      sortIndex: 0,
      listLoad: false,
      classifyLoading: false,
      showSift: false,
      showSort: false,
      columns: [["智能排序", "销量", "附近"]],
      siftForm: {
        min: 0,
        max: 1000,
      },
      popupForm: {
        min: 0,
        max: 1000,
      },
    };
  },
  computed: {
    ...mapGetters([
      "system",
      "classifyId",
      "currentAddress",
      "loadLocation",
      "latitude",
      "longitude",
    ]),
    title() {
      let str =
        this.loadLocation && !this.currentAddress
          ? "正在获取您的位置"
          : this.currentAddress?.streetCommunity || "无法获取您的位置";
      return str;
    },
    menuIndex: {
      get() {
        const index = this.classifyList.findIndex((item) => {
          return item.id == this.classifyId;
        });
        return index;
      },
      set() {},
    },
    listLoadStatus: {
      get() {
        let str = this.listLoad
          ? "loading"
          : this.totalPage <= this.page
          ? "nomore"
          : "loadmore";
        return str;
      },
      set() {},
    },
  },
  watch: {
    menuIndex() {
      this.refresh();
    },
  },
  onReachBottom() {
    if (this.totalPage <= this.page) return;
    this.page += 1;
    this.getServiceList();
  },
  onPullDownRefresh() {
    this.refresh();
  },
  onLoad() {
    this.getClassifyList();
  },
  methods: {
    clickFunc() {
      this.$checkLogin();
      uni.chooseLocation({
        latitude: this.currentAddress
          ? this.currentAddress.latitude
          : this.latitude,
        longitude: this.currentAddress
          ? this.currentAddress.longitude
          : this.longitude,
        success: ({ name, latitude, longitude }) => {
          this.$store.commit("SET_CURRENT_ADDRESS", {
            streetCommunity: name,
            latitude,
            longitude,
          });
        },
      });
    },
    changeMenuIndex(index) {
      this.$store.commit("SET_CLASSIFY_ID", this.classifyList[index].id);
    },
    async getClassifyList() {
      this.classifyList = [];
      this.classifyLoading = true;
      this.listLoad = true;
      const { data, code } = await getClassifyList({
        type: 1,
        status: 1,
      });
      this.classifyLoading = false;
      this.listLoad = false;
      if (code !== 200) return;
      this.classifyList = data.filter((item) => {
        return item.pid == 0;
      });
      if (!this.classifyId)
        this.$store.commit("SET_CLASSIFY_ID", this.classifyList[0].id);
    },
    submitSift() {
      this.siftForm = { ...this.popupForm };
      this.changeShowSift(false);
      this.refresh();
    },
    handleRangeChange(e) {
      this.popupForm.min = e[0];
      this.popupForm.max = e[1];
    },
    confirmSort({ indexs }) {
      this.sortIndex = indexs[0];
      this.changeShowSort(!this.showSort);
      this.refresh();
    },
    changeShowSift(status) {
      this.showSift = status;
      if (this.showSort) {
        this.changeShowSort(false);
        setTimeout(() => {
          this.showSift = status;
        }, 200);
      }
    },
    changeShowSort(status) {
      this.showSort = status;
      if (this.showSift) {
        this.changeShowSift(false);
        setTimeout(() => {
          this.showSort = status;
        }, 200);
      }
    },
    async getServiceList() {
      this.listLoad = true;
      const { data, code } = await getServiceList({
        cateId: this.classifyList[this.menuIndex].id,
        page: this.page,
        type: 1,
        distance: this.sortIndex == 2 ? 1 : 0,
        sales: this.sortIndex == 1 ? 1 : 0,
        smart: this.sortIndex == 0 ? 1 : 0,
        maxPrice: this.siftForm.max == 1000 ? null : this.siftForm.max,
        minPrice: this.siftForm.min,
      });
      uni.stopPullDownRefresh();
      this.listLoad = false;
      if (code !== 200) return;
      this.totalPage = data.totalPage;
      this.serviceList = this.serviceList.concat(data.list);
    },
    refresh() {
      this.page = 1;
      this.serviceList = [];
      this.getServiceList();
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  position: relative;
}

.sticky {
  background: #fff;
  position: relative;
  overflow: hidden;
}

.sift-popup {
  padding: 0 16px 30px;

  &-item {
    margin-top: 16px;

    &-title {
      color: #666;
      margin-bottom: 10px;
    }
  }

  .submit-btn {
    background: #31bc4e;
    border-radius: 16px;
    width: 104px;
    height: 32px;
    color: #fff;
    margin: 50px auto 0;
  }

  .popup-title {
    color: #232323;
    height: 54px;
    line-height: 54px;
    position: relative;

    .close {
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -10px;
    }

    .line {
      width: 16px;
      height: 2px;
      margin: -14px auto 0;
      background: #232323;
      border-radius: 3px;
    }
  }
}
</style>